import React, { Component, useState } from 'react'
import { EnvironmentOutline, MessageOutline } from 'antd-mobile-icons'
import { SearchBar } from 'antd-mobile'
import { Button, Space, Swiper, Toast, Grid, InfiniteScroll, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import "./Home.css"
import swiper01 from '../../static/images/swiper01.png'
import swiper02 from '../../static/images/swiper02.png'
import swiper03 from '../../static/images/swiper03.png'
import api from "../../api/index"
import FootNav from '../../components/FootNav/FootNav'
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom"


// 轮播图信息
const colors = [swiper01, swiper02, swiper03]
const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div
            className="content"
            style={{ background: color }}
        >
            <img src={color} alt="" />
        </div>
    </Swiper.Item>
))

// 上拉加载
let params = {
    city: '',
    pagenum: 1,
    pagesize: 10
}

async function mockRequest() {
    await sleep(2000)
    let { data: { newResult } } = await api.home.getHome(params)
    params.pagenum++;
    newResult.forEach((item, index) => {
        item.carouselMap = 'http://127.0.0.1:3000/newImg/' + item.carouselMap.split("|")[0]
        item.entire = item.entire ? '整租' : '合租'
    })
    // console.log(newResult);
    return newResult
}


function Home(props) {
    const [data, setData] = useState([]);
    const [hasMore, setHasMore] = useState(true);
    params.city = props.city ? props.city : '武汉'
    async function loadMore() {
        const append = await mockRequest()
        setData(val => [...val, ...append])
        setHasMore(append.length > 0)
    }


    function renderHouse() {
        return data.map((item, index) => (
            <li key={index}>
                <img src={item.carouselMap} alt="" />
                <Grid columns={2} gap={6} className='houseBox'>
                    <Grid.Item>
                        <p>{item.community}</p>
                        <p>{item.roomTypeName} - {item.size} ㎡ </p>
                    </Grid.Item>
                    <Grid.Item className='right'>
                        <p> {item.entire} </p>
                        <p> {item.priceNum} 元/月 </p>
                    </Grid.Item>
                </Grid>
            </li>
        ))
    }


    const navigate = useNavigate();
    return (
        <div className="home">
            <header>
                <EnvironmentOutline className="location" color='#fff' fontSize={28}
                onClick={() => navigate('/location')}
                 />
                <SearchBar placeholder='搜索您想住的区域或小区' />
                <MessageOutline className="chat" color='#fff' fontSize={28} />
            </header>
            {/* 轮播图 */}
            <div className="swiper">
                <Swiper loop
                    autoplay
                    indicatorProps={{
                        color: 'red',
                    }}
                >{items}</Swiper>
            </div>
            <div className="box">
                <Grid columns={2} gap={6}>
                    <Grid.Item>
                        <div className='grid-demo-item-block'>找室友</div>
                    </Grid.Item>
                    <Grid.Item>
                        <div className='grid-demo-item-block'>宜居社区</div>
                    </Grid.Item>
                </Grid>
            </div>
            <h2 className="title">热门房源</h2>

            {/* 房源信息展示 */}
            <div className="house">
                <ul>
                    {renderHouse()}
                </ul>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </div>

            <FootNav></FootNav>
                        
        </div>
    );

}

let mapStateToProps=(state,oldProps)=>{
    // 逻辑处理  
    return {
        ...state,
        ...oldProps

    }
}
const mapDispatchToProps = {
    
};
export default connect(mapStateToProps,mapDispatchToProps)(Home);